<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .circle-wrap {
            width: 5rem;
            height: 5rem;
            background-color: coral;
            border-radius: 50%;
        }
    </style>
</head>
<body style="font-size: 20px">
<div class="circle-wrap" style="position: absolute"></div>

<script>
    let drag = document.getElementsByClassName('circle-wrap')[0];

    function touchEvent1() {
        drag.ontouchstart = function (event) {
            var event = event || window.event;

            var diffX = event.touches[0].clientX - drag.offsetLeft;
            var diffY = event.touches[0].clientY - drag.offsetTop;

            console.log('offset', diffX, diffY);

            drag.ontouchmove = function (event) {
                let left = event.changedTouches[0].clientX - diffX;
                let top = event.changedTouches[0].clientY - diffY;

                //超边修正
                if (left < 0) {
                    left = 0;
                }
                else if (left > window.innerWidth - drag.offsetWidth) {
                    left = window.innerWidth - drag.offsetWidth;
                }
                if (top < 0) {
                    top = 0;
                }
                else if (top > window.innerHeight - drag.offsetHeight) {
                    top = window.innerHeight - drag.offsetHeight;
                }


                // console.log(left, top);
                drag.style.left = left + "px";
                drag.style.top = top + "px";
            }

            drag.ontouchend = function (event) {
                drag.touchmove = null;
                drag.touchend = null;
            }

        }
    }

    function touchEvent2() {

        drag.addEventListener('touchstart', touch, false);
        drag.addEventListener('touchmove', touch, false);
        drag.addEventListener('touchend', touch, false);


        var diffX = 0;//不能定义在touch中，每次move都会触发，会被重置
        var diffY = 0;

        function touch(event) {
            var event = event || window.event;

            switch (event.type) {
                case "touchstart":
                    console.log(event.touches[0].clientX + ", " + event.touches[0].clientY);

                    diffX = event.touches[0].clientX - drag.offsetLeft;
                    diffY = event.touches[0].clientY - drag.offsetTop;

                    // console.log('offset', diffX, diffY);

                    break;
                case "touchmove":
                    // console.log(event.touches[0].clientX + ", " + event.touches[0].clientY );
                    let left = event.changedTouches[0].clientX - diffX;
                    let top = event.changedTouches[0].clientY - diffY;
                    console.log('offset', diffX, diffY);
                    //超边修正
                    if (left < 0) {
                        left = 0;
                    }
                    else if (left > window.innerWidth - drag.offsetWidth) {
                        left = window.innerWidth - drag.offsetWidth;
                    }
                    if (top < 0) {
                        top = 0;
                    }
                    else if (top > window.innerHeight - drag.offsetHeight) {
                        top = window.innerHeight - drag.offsetHeight;
                    }

                    // console.log(left, top);
                    drag.style.left = left + "px";
                    drag.style.top = top + "px";
                    break;
                case "touchend":
                    // console.log(event.changedTouches[0].clientX + ", " + event.changedTouches[0].clientY);
                    break;
            }

        }
    }

    window.addEventListener('load', touchEvent2, false);
</script>
</body>
</html>